<template>
	<view class="home-container">
		<!-- 搜索框 -->
		<searchBar></searchBar>
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item, index) in swipers" :key="index"><image :src="item.image_src" mode="widthFix"></image></swiper-item>
		</swiper>
		<!-- 导航 -->
		<view class="nav-box"><image v-for="item in nav" :key="item.name" :src="item.image_src" mode=""></image></view>
		<!-- 楼层 -->
		<view class="floor-box" v-for="(item, index) in floorList" :key="index">
			<view class="header"><image :src="item.floor_title.image_src" mode=""></image></view>
			<view class="bottom">
				<image class="leftImg" :src="item.product_list[0].image_src" mode=""></image>
				<view class="rightImg">
					<template v-for="(it, i) in item.product_list">
						<image :key="i" v-if="i !== 0" :src="it.image_src" mode=""></image>
					</template>
				</view>
			</view>
		</view>
		<!-- 返回顶部 -->
		<view class="backTop" v-if="isShow" @tap="backTop">
			<text>^</text>
			<view>顶部</view>
		</view>
	</view>
</template>

<script>
	import searchBar from '../components/searchBar.vue'
export default {
	components:{
		searchBar
	},
	data() {
		return {
			swipers: [],
			nav: [],
			floorList: [],
			isShow: false
		};
	},
	methods: {
		// 获取轮播图
		getSwipers() {
			this.$request({
				url: '/api/public/v1/home/swiperdata',
				method: 'get'
			}).then(res => {
				this.swipers = res;
			});
		},
		// 获取导航
		getNav() {
			this.$request({
				url: '/api/public/v1/home/catitems',
				method: 'get'
			}).then(res => {
				this.nav = res;
			});
		},
		// 获取楼层
		getFloor() {
			this.$request({
				url: '/api/public/v1/home/floordata',
				method: 'get'
			}).then(res => {
				console.log(res);
				this.floorList = res;
			});
		},
		// 返回顶部
		backTop() {
			console.log(1);
			uni.pageScrollTo({
				scrollTop:0,
				duration:1000
			})
		}
	},
	onLoad() {
		this.getSwipers();
		this.getNav();
		this.getFloor();
	},
	onPageScroll (value) {
		this.isShow = value.scrollTop > 200 ? true : false
	}
};
</script>

<style lang="less">

.nav-box {
	height: 194rpx;
	display: flex;
	justify-content: space-around;
	image {
		width: 128rpx;
		height: 140rpx;
	}
}
.floor-box {
	.header {
		background-color: #f4f4f4;
		padding: 10rpx;
		padding-top: 20rpx;
		margin-bottom: 20rpx;
		image {
			display: block;
			height: 50rpx;
			width: 750rpx;
		}
	}
	.bottom {
		display: flex;
		padding: 0 17rpx;
		> image {
			width: 232rpx;
			height: 386rpx;
		}
		.rightImg {
			flex: 1;
			image {
				padding-left: 10rpx;
				width: 232rpx;
				height: 188rpx;
			}
		}
	}
}
	.backTop{
		width: 120rpx;
		height: 120rpx;
		position: fixed;
		right: 20rpx;
		bottom: 30rpx;
		background:rgba(255,255,255,0.3);
		color: #767575;
		text-align: center;
		border-radius: 50%;
		text{
			display: block;
			margin-top:20rpx ;
		}
		view{
			margin: -20rpx;
		}
	}
</style>
